/*
* @Description:组织管理
* @Author: lil
* @Date: 2021/11/24
**/
<template>
  <div class="app-container">
    <!-- 表单 -->
    <el-form :inline="true" class="demo-form-inline">
      <!-- <el-form-item label="组织名称">
        <el-input v-model="organizationName" placeholder="请输入组织名称"></el-input>
      </el-form-item>
      <el-form-item label="用户名称">
        <el-input v-model="userName" placeholder="请输入用户名称"></el-input>
      </el-form-item> -->
      <!-- <el-form-item class="fr">
        <el-button type="primary" icon="el-icon-search" size="mini">搜索</el-button>
        <el-button type="info" icon="el-icon-refresh" size="mini">重置</el-button>
      </el-form-item> -->
    </el-form>
    <el-button size="mini" type="primary" icon="el-icon-plus" class="mb10" @click="handleData('0')">添加</el-button>
    <!-- 表格 -->
    <el-table :data="listData" border tooltip-effect="dark">
      <el-table-column label="序号" type="index" width="70" align="center">
      </el-table-column>
      <el-table-column prop="name" label="组织名称" align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="domain" label="域名" align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="type" label="组织类型" align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="hosts" label="主机" align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="iconfont zfsoft-xiugai" @click="handleData('1',scope.row)">修改
          </el-button>
          <el-button size="mini" type="text" icon="iconfont zfsoft-shanchu" @click="deleteData(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <!-- <el-pagination background :page-sizes="[100, 200, 300, 400]" :page-size="100"
      layout="total, sizes, prev, pager, next, jumper" :total="400">
    </el-pagination> -->
    <!-- 新增弹窗 -->
    <el-dialog v-if="dialogVisible" :close-on-click-modal="false" :title="title" :visible.sync="dialogVisible"
      width="40%">
      <organization-manage-add :org="org" :title="title" @closeadd='closeadd'></organization-manage-add>
    </el-dialog>
  </div>
</template>
<script>
  import organizationManageAdd from './organizationManageAdd'
  import {
    getOrgList,
    deleteOrg
  } from '@/api/blockchain/deployorg'
  export default {
    components: {
      organizationManageAdd
    },
    data() {
      return {
        //组织名
        organizationName: '',
        //用户名
        userName: '',
        listData: [],
        org: {
          name: '',
          domain: '',
          type: '',
          hosts: [],
        },
        dialogVisible: false,
      };
    },
    mounted() {
      this.getOrgList()
    },
    methods: {
      handleData(val, row) {
        if (val == 0) {
          this.title = "新增";
          this.org.name = '';
          this.org.domain = '';
          this.org.type = '';
          this.org.hosts = [];
        } else {
          this.title = "修改";
          this.org.name = row.name;
          this.org.domain = row.domain;
          this.org.type = row.type;
          this.org.hosts = row.hosts.split(',');
        }
        this.dialogVisible = true;
      },
      closeadd() {
        this.dialogVisible = false
        this.getOrgList()
      },

      getOrgList() {
        var _this = this;
        getOrgList().then(function (res) {
          _this.listData = res;
          for (let i = 0; i < res.length; i++) {
            _this.listData[i].hosts = res[i].host.join(",");
          }
        })
      },

      deleteData(row) {
        this.$confirm('确认删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          closeOnClickModal: false
        }).then(() => {
          deleteOrg(row).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getOrgList()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    }
  };

</script>
